import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {getQueryString} from '../utils/util';
import { Button, List, InputItem, Picker,Toast, ActivityIndicator } from 'antd-mobile';
import LxrItem from '../components/lxrItem';

import 'antd-mobile/lib/button/style/index.css';
import 'antd-mobile/lib/list/style/index.css';
import 'antd-mobile/lib/input-item/style/index.css';
import 'antd-mobile/lib/picker/style/index.css';
import 'antd-mobile/lib/toast/style/index.css';
import 'antd-mobile/lib/activity-indicator/style/index.css';
import '../static/styles/add-lxr.css';

import { get, post } from '../api/getData';

class AddLxr extends Component {
    constructor(props) {
        super(props);
        this.state = {
            real_name: '',
            mobile: '',
            idcard: '',
            relation:'本人',
            realnameStatus:'',
            idcardStatus:'',
            mobileStatus:'',
            relationStatus:'',
            submitLoading:false,
            id:'',
            animating:false
        }
    }

    componentDidMount() {
        document.title = '添加联系人';
        let id = getQueryString('id');
        let __this = this;
        if(id){
            __this.setState({
                animating:true
            });
            get('/api/activity/lxr/info', {id:id}, function(error, data){
                __this.setState({
                    animating:false
                });
                if(error === null){
                    __this.setState({
                        ...data.data
                    });
                }
            });
        }
    }

    checkRealNameField(){
        this.setState({
            real_name: this.realname.value,
            realnameStatus:'right'
        });

        if(!this.realname.value){
            this.setState({
                realnameStatus: 'error'
            });
        }
    }
    checkMobileField(){
        this.setState({
            mobile: this.mobile.value
        });
        let regex = /^13[\d]{9}$|^14[5,7]{1}\d{8}$|^15[^4]{1}\d{8}$|^17[0,3,6,7,8]{1}\d{8}$|^18[\d]{9}$/;
        if(this.mobile.value){
            if(regex.test(this.mobile.value)){
                this.setState({
                    mobileStatus: 'right'
                });
            }else{
                this.setState({
                    mobileStatus: 'error'
                });
            }
        }else{
            this.setState({
                mobileStatus: 'error'
            });
        }
    }
    checkIdcardField(){
        this.setState({
            idcard: this.idcard.value
        });
        let regex = /^\d{17}[0-9xX]$/;
        if(this.idcard.value){
            if(regex.test(this.idcard.value)){
                this.setState({
                    idcardStatus: 'right'
                });
            }else{
                this.setState({
                    idcardStatus: 'error'
                });
            }
        }else{
            this.setState({
                idcardStatus: 'error'
            });
        }
    }
    checkRelationField(){
        this.setState({
            relation: this.relation.value
        });
    }

    submit(){
        let formData = new FormData();
        let __this = this;
        formData.append('real_name', this.state.real_name);
        formData.append('mobile', this.state.mobile);
        formData.append('idcard', this.state.idcard);
        formData.append('relation', this.state.relation);

        __this.setState({
            submitLoading:true
        });

        let returnPath = getQueryString('redirect');
        post('/api/activity/lxr/add', formData, function(error, data){
            __this.setState({
                submitLoading:false
            });
            if(error === null){
                Toast.success('添加成功', 1);
                window.location.href = '/'+returnPath;
            }else{
                Toast.fail(error, 1);
            }
        })
    }

    update(){
        let formData = new FormData();
        let __this = this;
        formData.append('real_name', this.state.real_name);
        formData.append('id', this.state.id);
        formData.append('mobile', this.state.mobile);
        formData.append('idcard', this.state.idcard);
        formData.append('relation', this.state.relation);

        __this.setState({
            submitLoading:true
        });

        post('/api/activity/lxr/update', formData, function(error, data){
            __this.setState({
                submitLoading:false
            });
            if(error === null){
                Toast.success('修改成功', 1);
                window.location.href = '/lxr/list';
            }else{
                Toast.fail(error, 1);
            }
        })
    }

    render() {
        return (<div>
            {
                this.state.animating
                ?
                <ActivityIndicator
                    toast
                    text="Loading..."
                />
                :
                ''
            }
            <div className='p22'>
                <div className='title-input'>
                    <div className='title-input-title'>姓&nbsp;&nbsp;&nbsp;&nbsp;名 :</div>
                    {
                        this.state.realnameStatus === 'right'
                        ?
                        <div className='title-input-input right'>
                            <input value={this.state.realname} onChange={() => this.checkRealNameField()} ref={realname => this.realname = realname} type='text' placeholder='请输入您的真实姓名' />
                        </div>
                        :
                        this.state.realnameStatus === 'error'
                        ?
                        <div className='title-input-input error'>
                            <input value={this.state.realname} onChange={() => this.checkRealNameField()} ref={realname => this.realname = realname} type='text' placeholder='请输入您的真实姓名' />
                        </div>
                        :
                        <div className='title-input-input'>
                            <input value={this.state.real_name} onChange={() => this.checkRealNameField()} ref={realname => this.realname = realname} type='text' placeholder='请输入您的真实姓名' />
                        </div>
                    }
                </div>
                <div className='title-input'>
                    <div className='title-input-title'>手机号码 :</div>
                    {
                        this.state.mobileStatus === 'right'
                        ?
                        <div className='title-input-input right'>
                            <input value={this.state.mobile} onChange={() => this.checkMobileField()} ref={mobile => this.mobile = mobile} type='text' placeholder='请输入有效的手机号码' />
                        </div>
                        :
                        this.state.mobileStatus === 'error'
                        ?
                        <div className='title-input-input error'>
                            <input value={this.state.mobile} onChange={() => this.checkMobileField()} ref={mobile => this.mobile = mobile} type='text' placeholder='请输入有效的手机号码' />
                        </div>
                        :
                        <div className='title-input-input'>
                            <input value={this.state.mobile} onChange={() => this.checkMobileField()} ref={mobile => this.mobile = mobile} type='text' placeholder='请输入有效的手机号码' />
                        </div>
                    }
                </div>
                <div className='title-input'>
                    <div className='title-input-title'>身份证号 :</div>
                    {
                        this.state.idcardStatus === 'right'
                        ?
                        <div className='title-input-input right'>
                            <input value={this.state.idcard} onChange={() => this.checkIdcardField()} ref={idcard => this.idcard = idcard} type='text' placeholder='请输入您的真实身份证' />
                        </div>
                        :
                        this.state.idcardStatus === 'error'
                        ?
                        <div className='title-input-input error'>
                            <input value={this.state.idcard} onChange={() => this.checkIdcardField()} ref={idcard => this.idcard = idcard} type='text' placeholder='请输入您的真实身份证' />
                        </div>
                        :
                        <div className='title-input-input'>
                            <input value={this.state.idcard} onChange={() => this.checkIdcardField()} ref={idcard => this.idcard = idcard} type='text' placeholder='请输入您的真实身份证' />
                        </div>
                    }
                </div>
                <div className='title-input'>
                    <div className='title-input-title'>关&nbsp;&nbsp;&nbsp;&nbsp;系 :</div>
                    <div className='title-input-select'>
                        <select value={this.state.relation} onChange={() => this.checkRelationField()} ref={relation => this.relation = relation}>
                            <option value="本人">本人</option>
                            <option value="家人">家人</option>
                            <option value="朋友">朋友</option>
                            <option value="同事">同事</option>
                        </select>
                    </div>
                </div>
                {
                    this.state.id
                    ?
                    this.state.submitLoading
                    ?
                    <Button className='enroll-button mt40 loading' onClick={() => this.update()}>修改</Button>
                    :
                    <Button className='enroll-button mt40' onClick={() => this.update()}>修改</Button>
                    :
                    this.state.submitLoading
                    ?
                    <Button className='enroll-button mt40 loading' onClick={() => this.submit()}>保存</Button>
                    :
                    <Button className='enroll-button mt40' onClick={() => this.submit()}>保存</Button>
                }
            </div>
        </div>);
    }
}

export default AddLxr;
